<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>

    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>DisSim</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link href="./css/style.css?v" rel="stylesheet" type="text/css" media="screen" />


        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            .clear:after {
                clear: both;
                content: ".";
                display: block;
                height: 0;
                visibility: hidden;
            }
            
            nav {
                display: inline-block;
                border: 1px solid #505255;
                border-bottom: 1px solid #282C2F;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                margin: 50px;
                -webkit-box-shadow: 1px 1px 3px #292929;
                -moz-box-shadow: 1px 1px 3px #292929;
            }
            
            #menu li {
                list-style: none;
                float: left;
                position: relative;
                /*background: -moz-linear-gradient(top, #fff, #555D5F 2% ,#555D5F  50%,#3E4245 100%);
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(2%, #555D5F), color-stop(50%, #555D5F),to(#3E4245));*/
                background: #D74E7C no-repeat left top;
            }
            
            #menu li:hover {
                /*background: -moz-linear-gradient(top, #fff, #3E4245 2% ,#555D5F  80%,#555D5F 100%);
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(2%, #3E4245), color-stop(80%, #3E4245),to(#555D5F));*/
                background: #D74E7C;
                -moz-transition: background 1s ease-out;
                -webkit-transition: background 1s ease-out;
            }
            
            #menu li a {
                display: block;
                height: 40px;
                line-height: 40px;
                padding: 0 30px;
                font-size: 22px;
                color: #fff;
                text-shadow: 0px -1px 0px #000;
                text-decoration: none;
                white-space: nowrap;
                -moz-border-top-left-radius: 2px;
                -webkit-border-top-left-radius: 2px;
                z-index: 100;
            }
            
            #menu li>a {
                position: relative;
            }
            
            #menu li.first a {
                -moz-border-radius-topleft: 4px;
                -moz-border-radius-bottomleft: 4px;
                -webkit-border-top-left-radius: 4px;
                -webkit-border-bottom-left-radius: 4px;
            }
            
            #menu li.last {
                border-right: 0 none;
            }
            
            dl {
                position: absolute;
                display: block;
                top: 40px;
                left: 25px;
                width: 165px;
                background: #D74E7C;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                -webkit-box-shadow: 1px 1px 3px #D74E7C;
                -moz-box-shadow: 1px 1px 3px #D74E7C;
                z-index: 10;
            }
            
            #menu li:hover dl {
                top: 50px;
                display: block;
                width: 180px;
                padding: 10px;
            }
            
            dl a {
                background: transparent;
                border: 0 none;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                -moz-transition: background 0.5s ease-out;
                -webkit-transition: background 0.5s ease-out;
                z-index: 50;
            }
            
            dl a:hover {
                color: #FFF;
                background: #999E9F;
                -moz-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
                -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
            }
            
            dd {
                margin-top: -40px;
                opacity: 0;
                width: 180px;
                -webkit-transition-property: all;
                /*-webkit-transition-timing-function: cubic-bezier(5,0,5,0);*/
                -moz-transition-property: all;
                /*-moz-transition-timing-function: cubic-bezier(5,0,5,0);*/
                /*-webkit-transition-delay:5s;
	-moz-transition-delay:5s;*/
            }
            
            #menu li:hover dd {
                margin-top: 0;
                opacity: 1;
            }
            
            #menu li dd:nth-child(1) {
                -webkit-transition-duration: 0.1s;
                -moz-transition-duration: 0.1s;
            }
            
            #menu li dd:nth-child(2) {
                -webkit-transition-duration: 0.2s;
                -moz-transition-duration: 0.2s;
            }
            
            #menu li dd:nth-child(3) {
                -webkit-transition-duration: 0.3s;
                -moz-transition-duration: 0.3s;
            }
            
            #menu li dd:nth-child(4) {
                -webkit-transition-duration: 0.4s;
                -moz-transition-duration: 0.4s;
            }
            
            dt {
                display: none;
                margin-top: -25px;
                padding-top: 15px;
                height: 10px;
            }
            
            #menu li:hover dt {
                display: block;
            }
            
            .Darrow {
                float: right;
                margin: 18px 10px 0 0;
                border-width: 5px;
                border-color: #FFF transparent transparent transparent;
                border-style: solid;
                width: 0;
                height: 0;
                line-height: 0;
                overflow: hidden;
                cursor: pointer;
                text-shadow: 0px -1px 0px #000;
                -webkit-box-shadow: 0px -1px 0px #000;
                -moz-box-shadow: 0px -1px 0px #000;
            }
            
            .arrow {
                margin: 0 auto;
                margin-top: -5px;
                display: block;
                width: 10px;
                height: 10px;
                background: #D74E7C;
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
            }
        </style>
    </head>

    <body>

        <div id="logo">

            <img src="images/hrbmu_2.png" onclick="www.hrbmu.edu.cn" height="60px" />

            <img src="images/logo.png" alt="semantic association and gene co-function" height="60px" />

        </div>
        <hr />
        <!-- end #logo -->
        <div id="header">
            <div id="menu">
                <ul class="clear">
                    <li><a href="index.jsp">HOME</a></li>
                    <li><a href="arss.jsp">TOOLS</a></li>
                    <li><span class="Darrow"></span><a href="resources.jsp">RESOURCES</a>

                        <dl>
                            <dt><span class="arrow"></span></dt>
                            <dd><a href="resources.jsp#databases">Databases</a></dd>
                            <dd><a href="resources.jsp#methods">Algorithms</a></dd>
                            <dd><a href="resources.jsp#downloads">Downloads</a></dd>
                            <dd><a href="resources.jsp#references">References</a></dd>
                        </dl>

                    </li>
                    <li><a href="tutor.jsp">TUTORIAL</a></li>
                    <li><a href="contact.jsp">CONTACT US</a>

                    </li>
                </ul>
            </div>
            <!-- end #menu -->

        </div>

        <!-- end #header -->
    </body>

    </html>